<template>
    <div class="function8" v-loading.fullscreen.lock="fullscreenLoading">

        <p class="function1_title1">基本信息</p>
        <div class="function1_content1">
            <div class="function1_content1_left">
                <el-avatar :size="60" :src="info.portraitImg" />
                <div class="function1_content1_left_info1">
                    <h4 class="function1_content1_left_info1_name1">{{ info.name }} </h4>
                    <div class="function1_content1_left_info1_name2">
                        <!-- <p>姓名：{{ info.nickname }}</p> -->
                        <p>年龄：{{ info.age }}----

                            {{ info.age <= 18 ? "未成年" : info.age <= 35 ? "成年" : "老年" }}</p>
                                <p>性别：
                                    {{ sex[info.sex] }}
                                </p>
                                <p>身高：{{ info.height }}</p>
                                <p>体重：{{ info.weight }}</p>
                                <p>个人履历：{{ info.introduce }}</p>
                    </div>
                </div>
            </div>
            <div>
            </div>
        </div>

    </div>
    <div class="function9">
        <p class="function2_title1">官方比赛</p>
        <el-row class="function2_content1" style="margin-left:110px" v-if="info.guanfangTeamMemberInfoDto">

            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">出场次数</h4>
                    <p class=" function2_content1_title1">{{ info.guanfangTeamMemberInfoDto.appearancesCount }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">首发次数</h4>
                    <p class=" function2_content1_title1">{{ info.guanfangTeamMemberInfoDto.totalStartingCount }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">红牌次数</h4>
                    <p class=" function2_content1_title1">{{ info.guanfangTeamMemberInfoDto.totalRedCardlNum }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">黄牌次数</h4>
                    <p class=" function2_content1_title1">{{ info.guanfangTeamMemberInfoDto.totalYellowCardlNum }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">出场时间</h4>
                    <p class=" function2_content1_title1">{{ info.guanfangTeamMemberInfoDto.exitTime }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">得分</h4>
                    <p class=" function2_content1_title1">{{ info.guanfangTeamMemberInfoDto.totalScore }}</p>
                </div>
            </el-col>

        </el-row>

    </div>
    <div class="function9">
        <p class="function2_title1">业余比赛</p>
        <el-row class="function2_content1" style="margin-left:110px" v-if="info.yeyuTeamMemberInfoDto">

            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">出场次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.appearancesCount }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">首发次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalStartingCount }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">红牌次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalRedCardlNum }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">黄牌次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalYellowCardlNum }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">出场时间</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.exitTime }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">得分</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalScore }}</p>
                </div>
            </el-col>
        </el-row>

    </div>
    <div class="function9">
        <p class="function2_title1">总比赛</p>
        <el-row class="function2_content1" style="margin-left:110px" v-if="info.yeyuTeamMemberInfoDto">

            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">出场次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.appearancesCount }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">首发次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalStartingCount }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">红牌次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalRedCardlNum }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">黄牌次数</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalYellowCardlNum }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">出场时间</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.exitTime }}</p>
                </div>
            </el-col>
            <el-col :span="4">
                <div style="width: fit-content;">
                    <h4 class="function2_content1_num1">得分</h4>
                    <p class=" function2_content1_title1">{{ info.yeyuTeamMemberInfoDto.totalScore }}</p>
                </div>
            </el-col>

        </el-row>

    </div>
    <div class="function12">

        <p class="function1_title1">身份证信息</p>
        <div class="function1_content1">
            <div class="function1_content1_li2">
                <p class="function1_content1_li2_title1">身份证正面：</p>
                <img class="function1_content1_li2_img" @click="imgShow=true;showImg=info.idCardPortraitFace" :src="info.idCardPortraitFace" alt="">
            </div>

            <div class="function1_content1_li2">
                <p class="function1_content1_li2_title1">身份证反面：</p>
                <img class="function1_content1_li2_img" @click="imgShow=true;showImg=info.idCardNationalEmblemFace" :src="info.idCardNationalEmblemFace" alt="">
                
            </div>
            <el-dialog v-model="imgShow" width="760px">
                <img class="ww100" :src="showImg" alt="">
            </el-dialog>
        </div>

    </div>
</template>
<script>

export default {
    data() {
        return {
            id: this.$route.params.id,
            param: {},
            imgShow: false,
            showImg: '',
            info: {},
            sex: { 1: '男', 2: '女' },
        }
    },

    created() {
        this.getData()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        getData() {
            let that = this;
            that.fullscreenLoading = true;
            this.param.userId = this.id;
            that.$api.playerdetail(this.param).then(res => {
                console.log(res)
                if (res) {
                    that.info = res;
                }
                that.fullscreenLoading = false;
            })

        },



    }

}


</script>
<style lang="scss" scoped>
.function9 {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;

    .function2_title1 {
        padding-left: 10px;
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        color: #242424;
        border-left: 4px solid #006DFF;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }

    .function2_content1 {
        text-align: center;
        padding: 28px 20px;

        .function2_content1_num1 {
            color: #3D7FFF;
            font-size: 18px;
        }

        .function2_content1_title1 {
            color: #414142;
            padding-top: 5px;
            font-size: 14px;
        }
    }
}

.function8 {
    // bgf padd20
    background-color: #fff;
    padding: 20px;

    .function1_title1 {
        padding-left: 10px;
        display: inline-block;
        line-height: 20px;
        font-size: 14px;
        color: #242424;
        border-left: 4px solid #006DFF;
        width: 100%;
        text-align: left;
        box-sizing: border-box;
    }

    .function1_content1 {
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid #EFEFEF;

        .function1_content1_left {
            display: flex;
            align-items: center;

            .function1_content1_left_info1 {
                padding-left: 16px;

                .function1_content1_left_info1_name1 {
                    font-size: 16px;
                    text-align: left;
                }

                .function1_content1_left_info1_name2 {
                    padding-top: 10px;
                    text-align: left;
                    color: #9a9a9a;

                    .function1_content1_left_info1_name2_content1 {
                        margin-top: 5px;
                    }
                }
            }
        }

        .function1_content1_button1 {
            width: 110px;
        }

        .function1_content1_button2 {
            width: 110px;
        }
    }
}

.function12 {
    padding: 20px;
    background-color: #fff;
    margin: 0;

    .function1_state1 {
        background: #F5F6FA;
        padding: 20px 24px;
        display: flex;

        .function1_state1_title1 {
            color: #1e1e1e;
            font-size: 24px;
            font-weight: 600;
        }

        .function1_state1_button1 {
            width: 115px;
            margin-left: 20px;
        }

    }

    .function1_title1 {
        background: #F7F8FA;
        padding: 0 18px;
        line-height: 48px;
        color: #1D1D1D;
        font-size: 14px;
        margin-top: 30px;
        text-align: left;
    }

    .function1_content1 {
        display: flex;
        flex-wrap: wrap;

        .function1_content1_li1 {
            display: flex;
            margin-right: 40px;
            margin-top: 20px;

            .function1_content1_li1_title1 {
                margin-left: 20px;
                font-size: 14px;
                color: #666;
                display: inline-block;
                line-height: 20px;
            }

            .function1_content1_li1_content1 {
                font-size: 14px;
                color: #666;
                display: inline-block;
                line-height: 20px;
            }

            .function1_content1_li1_button1 {
                font-size: 14px;
                color: #0771FF;
                display: inline-block;
                line-height: 20px;
                margin-left: 10px;
                cursor: pointer
            }
        }

        .function1_content1_li2 {
            width: 100%;
            display: flex;
            margin-right: 40px;
            margin-top: 20px;
            box-sizing: border-box;

            .function1_content1_li2_title1 {
                margin-left: 20px;
                font-size: 14px;
                color: #666;
                display: inline-block;
                line-height: 20px;
            }

            .function1_content1_li2_img {
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
        }
    }
}</style>